<template>
	<view class="userInfo">
		<view class="title">
			<view class="btn" v-if="activeIndex===index" @tap='changeShowOrUpdata(index)' v-for="(item,index) in btnInfo" :key="index">
				{{item}}
			</view>
		</view>
		<user-info-show  v-if="activeIndex===0"></user-info-show>
		<user-info-updata  v-else></user-info-updata>
	</view>
</template>

<script>
	import {
		requestUserData
	} from 'api/user/user.js';
	import UserInfoShow from './userInfo-show.vue'
	import UserInfoUpdata from './userInfo-updata.vue'
	export default {
		data() {
			return {
				activeIndex: 0,
				btnInfo: ['修改用户信息', '取消修改']
			}
		},
		methods: {
			changeShowOrUpdata(index) {
				this.activeIndex = index === 0 ? 1 : 0;
			},
			getUserInfo() {
				requestUserData().then(res => {
					this.$store.commit('setUserInfo',res.data.userInfo);
				})
			},
			onShow() {
					this.getUserInfo();
			}
		},
		components: {
			'user-info-show': UserInfoShow,
			'user-info-updata': UserInfoUpdata,
		}
	}
</script>

<style lang="scss" scoped>
	.userInfo {
		box-sizing: border-box;
		padding: 20rpx;

		.title {
			width: 100%;

			.btn {
				float: right;
				width: 224rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
				text-align: center;
				color: #353535;
				border: 1px solid #353535;
				border-radius: 10rpx;
			}
		}
	}
</style>
